<html>
    <head>
        <meta charset="UTF-8" />
        <title>Spine Pixi Example</title>
        <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.4.2/dist/pixi.min.js"></script>
        <script src="../dist/iife/spine-pixi-v7.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
        <link rel="stylesheet" href="../../index.css">
    </head>

    <body>
        <script>
            (async function () {
                var app = new PIXI.Application({
                    width: window.innerWidth,
                    height: window.innerHeight,
                    resolution: window.devicePixelRatio || 1,
                    autoDensity: true,
                    resizeTo: window,
                    backgroundColor: 0x2c3e50,
                    hello: true,
                });
                document.body.appendChild(app.view);

                // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
                PIXI.Assets.add("spineboyData", "/assets/spineboy-pro.skel");
                PIXI.Assets.add("spineboyAtlas", "/assets/spineboy-pma.atlas");
                await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);

                // Create the spine display object
                const spineboy = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas",
                    scale: 0.5,
                });

                // Set the default mix time to use when transitioning
                // from one animation to another.
                spineboy.state.data.defaultMix = 0.2;

                // Set looping animations "idle" on track 0 and "aim" on track 1.
                spineboy.state.setAnimation(0, "idle", true);
                spineboy.state.setAnimation(1, "aim", true);

                // Center the Spine object on screen.
                spineboy.x = window.innerWidth / 2;
                spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;

                // Add the display object to the stage.
                app.stage.addChild(spineboy);

                // Make the stage interactive and register pointer events
                app.stage.eventMode = "dynamic";
                app.stage.hitArea = app.screen;
                let isDragging = false;

                app.stage.on("pointerdown", (e) => {
                    isDragging = true;
                    setBonePosition(e);
                });

                app.stage.on("pointermove", (e) => {
                    if (isDragging) setBonePosition(e);
                });

                app.stage.on("pointerup", (e) => (isDragging = false));

                const setBonePosition = (e) => {
                    // Transform the mouse/touch coordinates to Spineboy's coordinate
                    // system origin. `position` is then relative to Spineboy's root
                    // bone.
                    const position = new spine.Vector2(
                        e.data.global.x - spineboy.x,
                        e.data.global.y - spineboy.y
                    );

                    // Find the crosshair bone.
                    const crosshairBone = spineboy.skeleton.findBone("crosshair");

                    // Take the mouse position, which is relative to the root bone,
                    // and transform it to the crosshair bone's parent root bone
                    // coordinate system via `worldToLocal()`. `position` is relative
                    // to the crosshair bone's parent bone after this
                    crosshairBone.parent.worldToLocal(position);

                    // Set the crosshair bone's position to the mouse position
                    crosshairBone.x = position.x;
                    crosshairBone.y = position.y;
                };
            })();
        </script>
    </body>
</html>